<template>
    <div class="content">
        <header @click="change"> {{msg}}</header> 
        <br>
        <p>来自：{{from}}</p>      
    </div>
</template>

<script>
export default {
    name:"donghua",
    data(){
        return {
            from:"",
            msg:''
        }
    },
    methods:{
        change(){
        fetch('https://v1.hitokoto.cn?c=a')
        .then(response => response.json())
        .then(data => {
            // console.log(data);
            this.from = data.from
            this.msg = data.hitokoto
        // const hitokoto = document.getElementById('hitokoto_text')
        // hitokoto.href = 'https://hitokoto.cn/?uuid=' + data.uuid
        // hitokoto.innerText = data.hitokoto
        })
        .catch(console.error)
        }
    },
    mounted(){
        this.change()
    },

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.content{
    padding: 20px;
    height: 100px;
    border-radius: 3px;
    background-color: rgb(193, 223, 248);
}
header {
    text-align: center;
    cursor:default;
    color:rgb(231, 161, 68)
}
p{
    font-size: 14px;
    color: #aaa;
    text-align: right;
}
</style>
